Aston Shell skinning tutorial: Toolbars

Aston Toolbars are one of the most tricky elements to skin for many Theme creators. On the one hand, creating a primitive Toolbar is simple: just make one image and repeat it for all the states, but that's far not the best you can do.

Basically each of the two Toolbars consists of 13 frames, and some of them might be repeated:

Ocean Morning Toolbar
Sample Toolbar image from Roman Osadchy's Ocean Morning

The first frame is usually a small arrow, triangle, dot or something else against the pink background. It defines the item, poining that a certain element has a sublevel. You may surely leave this frame blank but in this case the Theme's usability will be decreased.

"In wild" this looks like:

Ocean morning Toolbar "in the wild"

The following frames are divided into three parts. Each "third" represents a certain sublevel of the Toolbar and its normal, highlighted and pressed states.

So, overall, the Toolbar frame list consists of the following images:

Non-empty sublevel indicator
The first "third": the first level Toolbars
The second "third": the second level Toolbars
The third "third": the third level Toolbars open up
The fourth "third": the third level Toolbars open down

As in most cases both third level skins are identical you can either use the same images for them or just not place the last three frames at all thus creating only 9 frames.

Note: for the Toolbars you can only use 1 bit "magic pink" transparency. For the first level Toolbar you cannot use any kind of transparency at all. Using PNG images is impossible.

Let's have a look at the "Ocean Morning" Theme Toolbar, created by Roman Osadchy as a sample.

Each Toolbar may have a header: two-state image, displayed on top of Toolbar. The topmost image is used for inactive state and the bottom one is seen when you click on the Toolbar header:

Sample Toolbar header from Dmitry Prosvirnin's "Aston 1.9.1 Desktop"

The limitations are similar: only "magic pink" may be used for transparent areas.

Note: don't try to make headers wider than Toolbar cells: the skin will be stretched anyway.

Don't think that the skin above is the only possible. It's excellent, but not the only one. Just have a look at some other works:

Left Toolbar skin from Dmitry Prosvirnin's "Cell" Theme (made in 2002 but still looks fresh and neat)

Left Toolbar skin by mrbiotech, "Cerevisiae"

Left Toolbar skin by Smanic, "Xbox" Theme

Don't forget, that there're two Toolbars in Aston, not just a single one. Thus you can give them a completely different look (if it fits your Theme's concept, of course) although this is far not the most popular solution: many designers still prefer "mirroring" Toolbar frames :)